<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="./css/mui.min.css">
		<link rel="stylesheet" href="css/app.css">
		<link rel="stylesheet" type="text/css" href="./css/feedback.css" />
		<style type="text/css">
			.ch{
				line-height: 40px;
			}
			.mui-content{
				background-color: black;
			}
		</style>
		<script type="text/javascript">
	
		function makeinfor(){
			var getinfor=$('.getinfor');
			for(var i=0;i<getinfor.length;i++)
			{
				getinfor[i].placeholder=getinfor[i].value;				
			}
		}
		
	</script>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">用户设置</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" href="#account">
									<img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
									<div class="mui-media-body">
										陌生人
										<p class='mui-ellipsis'>账号:未设置</p>
									</div>
								</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#account" class="mui-navigate-right">个人设置</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#notifications" class="mui-navigate-right">新消息通知</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#privacy" class="mui-navigate-right">隐私</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#general" class="mui-navigate-right">通用</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="#general" class="mui-navigate-right myhistory">我的秘密历史</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#about" class="mui-navigate-right">关于密语 <i class="mui-pull-right update">V1.0.0</i></a>
							</li>
						</ul>
						<ul class="mui-table-view" id="reset_launch">
							<li class="mui-table-view-cell" style="text-align: center;">
								<a>退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
				<footer>
				<nav class="mui-bar mui-bar-tab ">
					<a class="mui-tab-item " id="tabbb1">
						<!--
                                               		为三个下部导航添加超链接
                                                   -->
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">附近的秘密</span>
					</a>
					<a class="mui-tab-item " id="tabbb2" >
						<span class="mui-icon mui-icon-plus"></span>
						<span class="mui-tab-label">发送秘密</span>
					</a>
					<a class="mui-tab-item " id="tabbb3">
						<span class="mui-icon mui-icon-person"></span>
						<span class="mui-tab-label">账户设置</span>
					</a>
				</nav>
			</footer>
		</div>
		<!--单页面结束-->
		<div id="account" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
				<h1 class="mui-center mui-title">个人设置</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a id="head" class="mui-navigate-right">头像
								<span class="mui-pull-right head">
									<img class="head-img mui-action-preview" id="head-img1" src=""/>
								</span>
							</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="ch">姓名<input  type="text" class="mui-pull-right mui-input-clear getinfor" style="border: none;margin-bottom: 0px   ; width: 118px;" placeholder="输入你的姓名"></input></a>
		
							</li>
							
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a class="ch">QQ号<input type="text" class="mui-pull-right mui-input-clear getinfor" style="border: none; margin-bottom: 0px   ;   width: 118px;" placeholder="输入你的QQ"></input></a>
							</li>
							<li class="mui-table-view-cell">
								<a class="ch">手机号<input  type="text" class="mui-pull-right mui-input-clear getinfor" style="border: none; margin-bottom: 0px   ;   width: 118px;" placeholder="输入你的手机"></input></a>
							</li>
							<li class="mui-table-view-cell">
								<a class="ch">邮箱地址<input  type="text" class="mui-pull-right mui-input-clear getinfor" style="border: none;  margin-bottom: 0px   ;  width: 118px;" placeholder="输入你的邮箱"></input></a>
							</li>
							<li class="mui-table-view-cell">
								<button type="button" class="mui-pull-right" onclick="makeinfor();" style="width:150px;">确认</button>
							</li>
							
							<li class="mui-table-view-cell ch setting">
								解锁图案设置
							</li>
							
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="notifications" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
				<h1 class="mui-center mui-title">新消息通知</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								通知显示消息详情
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<div class="mui-content-padded">
							<p>若关闭，当收到新消息时，通知提示将不显示发信人和内容摘要</p>
						</div>

						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#notifications_disturb" class="mui-navigate-right">功能消息免打扰</a>
							</li>
						</ul>
						<div class="mui-content-padded">
							<p>设置系统功能消息提示声音和震动的时段</p>
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								声音
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								震动
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						
						<div></div>
					</div>
				</div>
			</div>
		</div>
		<div id="notifications_disturb" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>新消息通知
				</button>
				<h1 class="mui-center mui-title">功能消息免打扰</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-radio">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">开启</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">只在夜间开启</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">关闭</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="privacy" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
				<h1 class="mui-center mui-title">隐私</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-divider">通讯录</li>
							<li class="mui-table-view-cell">
								加我为朋友时需要验证
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								向我推荐QQ好友
								<div class="mui-switch mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								通过QQ号搜索到我
								<div class="mui-switch mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								可通过手机号搜索到我
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								向我推荐通讯录朋友
								<div class="mui-switch mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							
						</ul>
						

					</div>
				</div>
			</div>
		</div>
		<div id="general" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
				<h1 class="mui-center mui-title">通用</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								多语言
							</li>
						</ul>

						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								听筒模式
								<div class="mui-switch mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								功能
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div id="about" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
				<h1 class="mui-center mui-title">关于密语</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-plus-visible mui-stream-hidden">
								<a id="rate" class="mui-navigate-right">评分鼓励</a>
							</li>
							<li class="mui-table-view-cell mui-plus-visible">
								<a id="welcome" class="mui-navigate-right">欢迎页</a>
							</li>
							<li class="mui-table-view-cell mui-plus-visible">
								<a id="share" class="mui-navigate-right">分享推荐</a>
							</li>
							
							<li class="mui-table-view-cell">
								<a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
							</li>
							<li id="check_update" class="mui-table-view-cell mui-plus-visible">
								<a id="update" class="mui-navigate-right">检查更新</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div id="feedback" class="mui-page feedback">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>关于密语
				</button>
				<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>
				<h1 class="mui-center mui-title">问题反馈</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-content-padded">
					<div class="mui-inline">问题和意见</div>
					<a class="mui-pull-right mui-inline" href="#popover">
						快捷输入
						<span class="mui-icon mui-icon-arrowdown"></span>
					</a>
					<!--快捷输入具体内容，开发者可自己替换常用语-->
					<div id="popover" class="mui-popover">
						<div class="mui-popover-arrow"></div>
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<!--仅流应用环境下显示-->
									<li class="mui-table-view-cell stream">
										<a href="#">桌面快捷方式创建失败</a>
									</li>
									<li class="mui-table-view-cell"><a href="#">界面显示错乱</a></li>
									<li class="mui-table-view-cell"><a href="#">启动缓慢，卡出翔了</a></li>
									<li class="mui-table-view-cell"><a href="#">偶发性崩溃</a></li>
									<li class="mui-table-view-cell"><a href="#">UI无法直视，丑哭了</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="row mui-input-row">
					<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
				</div>
				<p>图片(选填,提供问题截图,总大小10M以下)</p>
				<div id='image-list' class="row image-list"></div>
				<p>QQ/邮箱</p>
				<div class="mui-input-row">
					<input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
				</div>
				<div class="mui-content-padded">
					<div class="mui-inline">应用评分</div>
					<div class="icons mui-inline" style="margin-left: 6px;">
						<i data-index="1" class="mui-icon mui-icon-star"></i>
						<i data-index="2" class="mui-icon mui-icon-star"></i>
						<i data-index="3" class="mui-icon mui-icon-star"></i>
						<i data-index="4" class="mui-icon mui-icon-star"></i>
						<i data-index="5" class="mui-icon mui-icon-star"></i>
					</div>
				</div><br />
			</div>
		</div>

	</body>
	<script src="./js/jquery-1.12.4.js"></script>
	<script src="./js/mui.min.js "></script>
	<script src="js/turnpage.js"></script>
	<script src="./js/mui.view.js "></script>
	<script src='./js/feedback.js'></script>
	<script src="js/user.js"></script>
	
	<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				/**
				 * 手动关闭启动界面
				 */
				plus.navigator.closeSplashscreen();
				/**
				 * 获取当前窗口对象，并取我们之前传过来的标识；
				 */
				var self = plus.webview.currentWebview();
				var mark = self.mark;
				/**
				 * 自动消失提示，位置为top；
				 * http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ToastOption
				 */
				/*plus.nativeUI.toast("我是从" + mark + "页面进来的", {
					verticalAlign: "top"
				});*/
				var first=null;
				document.getElementById("reset_launch").addEventListener("tap", function() {
					/**
					 * 系统确认对话框
					 * http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.confirm
					 */
					if(!first)
					{
						first = new Date().getTime();
						plus.nativeUI.confirm("是否重置首次打开app？", function(event) {
						/**
						 * 按钮的索引，从0开始；
						 */
						var index = event.index;
						if(index == 0) {
							/**
							 * 通过key值删除键值对存储的数据
							 * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.removeItem
							 */
							plus.storage.removeItem("launchFlag");
							/**
							 * 自动消失提示，位置为center；
							 * http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ToastOption
							 */
							plus.nativeUI.toast("重置成功，2秒后重启app。", {
								verticalAlign: "center"
							});
							/**
							 * 2秒后重启应用
							 * http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.restart
							 */
							setTimeout(function() {
								plus.runtime.restart();
							}, 2000);
						}
					}, "重置启动", ["重置", "放弃"]);
						plus.nativeUI.toast("再按一次退出应用");
						setTimeout(function() {
						first = null;
					}, 1000);
					}
					else
					{
						if(new Date().getTime() - first < 1000) {
						/**
						 * 退出应用，仅安卓有效；
						 * http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.quit
						 */
							plus.runtime.quit();
						}
					}
				});
			});
			/**
			 * 重写mui.back()，一秒内连续点击两次，退出应用，仅安卓有效；
			 */
			$('.setting').on("tap",function(){
				mui.openWindow({
						url: "login/setting.html",
						id: "setting1",
						extras: {
							mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；
						}
					});
			})
			
			$('.myhistory').on("tap",function(){
				mui.openWindow({
						url: "mylist.html",
						id: "myhistory",
						extras: {
							mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；
						}
					});
			})
		
	</script>
</html>